<template>
  <div>
    <!--<el-button size="mini" type="primary" @click="addClick">添加禁言用户</el-button>-->
    <div style="display: flex;flex-wrap:wrap;align-content:flex-start;height: 500px;overflow:auto;">
      <div v-show="dataList.length<=0" style="width: 100%;height: 100%;display: flex;align-items:center;justify-content:center;">
        暂无数据
      </div>
      <div :style="width" v-for="(item,index) in dataList" :key="index">
        <div :style="padding">
          <div :style="bgGray">
            <div :style="paddingXs">
              <div style="display: flex;align-items:center;">
                <!--                            <img width="60" height="60" :src="item.pic">-->
                <img width="60" height="60" src="https://images3.laiyifen.com/imagespace/2018081510/2c0b18e1-3c45-4df6-8373-871080c682ac.jpg">
                <div style="flex: 1;font-size: 13px;margin-left: 15px;">{{item.name}}</div>
                <el-button type="text" size="mini" @click="remove(index,item.id)">移除</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加禁言用户"
      :visible.sync="addDialogVisible"
      width="60%"
      append-to-body
      @opened="addOpened">
      <div>
        <el-form label-width="100px" size="mini" :model="dataForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="用户昵称：">
                <el-input v-model="dataForm.name" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户手机：">
                <el-input v-model="dataForm.mobile" ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
                <el-button @click="reset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%;margin-top: 15px;" height="360" :header-cell-style="headerCellStyle" :cell-style="cellStyle">
          <template slot="empty">
            <p>暂无数据</p>
          </template>
          <el-table-column prop="id" align="center" label="序号" min-width="20%">
          </el-table-column>
          <el-table-column prop="name" :show-overflow-tooltip="true" align="center" label="用户昵称" min-width="20%">
          </el-table-column>
          <el-table-column prop="mobile" :show-overflow-tooltip="true" align="center" label="用户手机" min-width="20%">
          </el-table-column>
          <el-table-column prop="pic" :show-overflow-tooltip="true" align="center" label="用户头像" min-width="20%">
            <template slot-scope="scope">
              <img :src="scope.row.pic" width="45" height="31">
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" min-width="20%">
            <template slot-scope="scope">
              <el-button v-if="scope.row.status===0" type="text" size="mini" @click="ban(scope.row)">禁言</el-button>
              <el-button v-if="scope.row.status===1" type="text" size="mini" disabled>禁言中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding: 15px;text-align: right;">
          <el-pagination
            layout="total, prev, pager, next, jumper,sizes"
            @current-change="refreshPageRequest"
            :current-page="pageRequest.pageNum"
            :page-size="pageRequest.pageSize"
            :total="totalSize"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChange"
          ></el-pagination>
        </div>

      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: "liveControllerUserBan",
    components: {
    },
    props:{
      data:{
        type: Object,
        default:()=>{}
      }
    },
    data() {
      return {
        width:{
          'width':'20%'
        },
        padding:{
          'padding':'10px 15px'
        },
        paddingXs:{
          'padding':'10px'
        },
        bgGray:{
          'background-color':'#f1f1f1'
        },
        headerCellStyle:{
          'background-color': '#f1f1f1',
          'font-size':'12px',
          'color':'#000000'
        },
        cellStyle:{
          'font-size':'12px'
        },
        dataList:[],
        addDialogVisible:false,
        dataForm:{},
        tableData:[],
        pageRequest:{
          pageNum:1,
          pageSize:10
        },
        totalSize:0,
        parentData:{}, // 父组件传递的参数
      }
    },
    watch: {
      data: function (newVal, oldVal) {
        this.parentData = newVal
      }
    },
    mounted: function () {
      this.parentData = this.data
    },
    methods: {
      getList(){ // 获取禁言列表
        this.utils.request.liveRequest({
          url: '/api/v1/userBanInfo/banList/'+this.parentData.anchorId,
          method: 'get',
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.dataList = data.data;
          }
        })
      },
      getUserList(params){ // 获取用户禁言列表
        if(!params){
          params = {}
        }
        params.anchorId = this.parentData.anchorId
        params.liveId = this.parentData.id
        params.pageNum = this.pageRequest.pageNum;
        params.pageSize = this.pageRequest.pageSize;
        this.tableData = []
        this.utils.request.liveRequest({
          url: '/api/v1/userBanInfo/userBanList',
          method: 'get',
          params: this.$http.adornParams(params)
        }).then(result => {
          let data = result.data;
          if (data && data.code == '0') {
            this.tableData.push(data.data);
          }
        })
      },
      remove(index,id){ // 移除
        let params = {
          id:id,
          liveId : this.parentData.id,
          anchorId: this.parentData.anchorId
        }
        this.utils.request.liveRequest({
          url: '/api/v1/userBanInfo/cancelBan',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.dataList.splice(index,1)
            this.$message.success("移除用户成功")
          } else{
            this.$message.success("移除用户失败")
          }
        })
      },
      addClick(){
        this.addDialogVisible = true
      },
      addOpened(){

      },
      reset(){ // 重置
        this.pageRequest = {
          pageSize:10,
          pageNum:1
        }
        this.dataForm = {}
        this.getUserList()
      },
      handleSizeChange: function (pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.pageRequest.pageNum = 1;
        this.getUserList(this.dataForm)
      },
      refreshPageRequest: function (pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.getUserList(this.dataForm)
      },
      query(){ // 查询
        this.getUserList(this.dataForm)
      },
      ban(row){ // 禁言
        let params = {
          uid:row.id,
          userName:row.name,
          liveId : this.parentData.id,
          anchorId: this.parentData.anchorId
        }
        this.utils.request.liveRequest({
          url: '/api/v1/userBanInfo/ban',
          method: 'post',
          params: params
        }).then(result => {
          let data = result.data;
          if (data && data.code === '0') {
            this.$message.success("用户禁言成功")
            this.getUserList(this.dataForm)
            this.getList()
          } else {
            this.$message.success("用户禁言失败")
          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">

</style>
